<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>登录成功</title>
</head>
<script src="js/jquery.js"></script>
<body>
<form>
    书本编号：<input type="text" name="bookId" id="bookId">
    书名: <input type="text" name="bookName" id="bookName">
    作者: <input type="text" name="bookWriter" id="bookWriter">
    类型：<select name="bookType" id="bookType">
    <option value="科幻" selected>科幻</option>
    <option value="教育" >教育</option>
    <option value="古典" >古典</option>
    <option value="" >无</option>
</select>
    <input type="button" value="搜索" id="searchBook">
</form>
<br>
<a href="addBook.jsp">添加书籍</a>
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>序号</td>
        <td>书名</td>
        <td>书类型</td>
        <td>作者</td>
        <td>出版时间</td>
        <td>删除</td>
        <td>修改</td>
    </tr>

</table>
<div id="pageBar">

</div>
<select id="pageSize">
    <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="20">20</option>
</select>

<script>
    $(document).ready(function () {
        searchBook(1);
    });
    $("#searchBook").click(function () {
        searchBook(1);
    })

    $("#pageSize").change(function () {
        searchBook(1);
    })

    function searchBook(pageNum) {

        $("tbody").empty();

        let trHead = $("<tr></tr>");
        trHead.append("<td>" + "序号" + "</td>");
        trHead.append("<td>" + "书编号" + "</td>");
        trHead.append("<td>" + "书名" + "</td>");
        trHead.append("<td>" + "作者" + "</td>");
        trHead.append("<td>" + "书类型" + "</td>");
        trHead.append("<td>" + "价格" + "</td>");
        trHead.append("<td>" + "库存" + "</td>");
        trHead.append("<td>" + "删除" + "</td>");
        trHead.append("<td>" + "修改" + "</td>");
        $("tbody").append(trHead);

        let bookName = $("#bookName").val();
        let bookWriter = $("#bookWriter").val();
        let bookType = $("#bookType").val();
        let bookId = $("#bookId").val();
        let id = $("#id").val();
        let pageSize = $("#pageSize").val();
        $.ajax({
            url: "books",
            type: "get",
            data: {
                "bookId": bookId,
                "bookName": bookName,
                "bookWriter": bookWriter,
                "bookType": bookType,
                "pageNum": pageNum,
                "pageSize": pageSize
            },
            dataType: "json",
            success: function (data) {
                console.log(data);
                let books = data.list;
                console.log(books);
                for (let i = 0; i < books.length; i++) {
                    let book = books[i];
                    let tr = $("<tr></tr>");
                    tr.append("<td>" + book.id + "</td>");
                    tr.append("<td>" + book.bookId + "</td>");
                    tr.append("<td>" + book.bookName + "</td>");
                    tr.append("<td>" + book.bookWriter + "</td>");
                    tr.append("<td>" + book.bookType + "</td>");
                    tr.append("<td>" + book.bookPrice + "</td>");
                    tr.append("<td>" + book.bookCount + "</td>");

                    // 添加删除功能
                    let deleteTd = $("<td></td>");
                    let deleteForm = $(`<a href="#" onclick="deleteBook(${"${book.id}"})">删除</a>
`)
                    deleteTd.append(deleteForm);
                    tr.append(deleteTd);

                    // 添加修改功能
                    let updateTd = $("<td></td>");
                    let updateLink = $("<a href='update.jsp?bookId=" + book.bookId + "&bookName=" + encodeURIComponent(book.bookName) + "&bookType=" + encodeURIComponent(book.bookType) + "&bookWriter=" + encodeURIComponent(book.bookWriter) + "&bookCount=" + book.bookCount + "&bookPrice=" + book.bookPrice + "&id=" + book.id + "'>修改</a>");
                    updateTd.append(updateLink);
                    tr.append(updateTd);


                    $("tbody").append(tr);
                }
                makePageBar(data);
            }
        })
    }

    //jsp中要使用 模板字符串
    function makePageBar(data) {
        let pageBar = $("#pageBar");
        pageBar.empty();
        if (data.hasPreviousPage) {
            let lastPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum-1}"})">上一页</a>`);
            pageBar.append(lastPage);
        }

        for (let i = 0; i < data.navigatepageNums.length; i++) {
            let a = $(`<a href="#" onclick="searchBook(${"${data.navigatepageNums[i]}"})">${"${data.navigatepageNums[i]}"}</a>`);
            if (data.pageNum == data.navigatepageNums[i]) {
                a.addClass("red");
            }
            pageBar.append(a);
        }
        if (data.hasNextPage) {
            let nextPage = $(`<a href="#" onclick="searchBook(${"${data.pageNum+1}"})">下一页</a>`);
            pageBar.append(nextPage);
        }
    }

    function deleteBook(bookId) {
        let confirm = window.confirm("请确认是否要删除，无法撤销");
        if (!confirm) {
            return false;
        }
        $.ajax({
            url: "deleteBook",
            type: "POST",
            data: {
                "id": bookId
            },
            success: function (data) {
                if (data == 'success') {
                    alert("删除成功");
                    searchBook(1);
                } else {
                    alert("删除失败");
                }
            }
        })
    }

</script>
</body>
</html>
